<!--
 * @FilePath     : /vision/src/view/ScreenPage.vue
 * @Author       : 哒哒哒
 * @Date         : 2024-05-28 01:32:29
 * @Description  :  整合后的页面
 * Copyright    : G AUTOMOBILE RESEARCH INSTITUTE CO.,LTD Copyright (c) 2024.
-->


<template>
    <div class="screen_page" :style="containerStyle">
      <div class="title_box">
        <img :src="headerSrc" alt="" class="bg_img">
        <div class="logo_box">
          <img :src="logoSrc" alt="">
        </div>
        <div class="title">电商平台实时监控系统</div>
        <div class="time_box">
          <img :src="themeSrc" alt="切换主题" @click="changeTheme">
          <span>{{ this.nowDate }}</span>
        </div>
      </div>
      <div class="chart_box">
        <div class="left_box">
          <div class="left_top_box">
            <Trend/>
          </div>
          <div class="left_bottom_box">
            <Seller/>
          </div>
        </div>
        <div class="middle_box">
          <div class="middle_top_box">
            <Map></Map>
          </div>
          <div class="middle_bottom_box">
            <Rank/>
          </div>
        </div>
        <div class="right_box">
          <div class="right_top_box">
            <Hot/>
          </div>
          <div class="right_bottom_box">
            <Stock/>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  import Hot from '@/components/Hot.vue'
  import Map from '@/components/Map.vue'
  import Rank from '@/components/Rank.vue'
  import Seller from '@/components/Seller.vue'
  import Stock from '@/components/Stock.vue'
  import Trend from '@/components/Trend.vue'
  import ThemeMixins from '@/mixins/ThemeMixins'
  import { getThemeValue } from '@/utils/theme_utils'
  import { getCurrentFormattedTime } from '@/utils'
  export default {
    name: 'ScreenPage',
    mixins: [ThemeMixins],
    components: {
      Hot,
      Map,
      Rank,
      Seller,
      Stock,
      Trend
    },
    data() {
      return {
        nowDate: getCurrentFormattedTime(),
        timeId: null
      }
    },  
    created () {
      this.timeId = setInterval(()=>{
        this.nowDate = getCurrentFormattedTime()
      }, 1000)
      // 注册接收到数据的回调函数
      this.$socket.registerCallback('themeChange', this.reciveResponse)
    },
    destroyed () {
      clearInterval(this.timeId);
      this.$socket.unRegisterCallback('themeChange')
    },
    computed: {
      logoSrc () {
        return '/static/img/' + getThemeValue(this.theme).logoSrc
      },
      headerSrc () {
        return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
      },
      themeSrc () {
        return '/static/img/' + getThemeValue(this.theme).themeSrc
      },
      containerStyle () {
        return {
          backgroundColor: getThemeValue(this.theme).backgroundColor,
          color: getThemeValue(this.theme).titleColor
        }
      },
    },
    methods: {
      changeTheme() {
        this.$socket.send({
          action: 'themeChange',
          socketType: 'themeChange',
          chartName: '',
          value: ''
        })
      },
      reciveResponse() {
        this.$store.commit('changeTheme')
      }
    }
  }
  </script>
  
  <style scoped lang='less'>
  .screen_page {
    width: 100%;
    height: 100%;
    background-color: rgb(22, 21, 34);
    .title_box {
      position: relative;
      height: 50px;
      width: 100%;
      .bg_img {
        height: 100%;
        width: 100%;
      }

      .logo_box {
        position: absolute;
        top: 0;
        left: 0;
        width: 128px;
        height: 35px;
        img {
          width: 128px;
          height: 35px;
        }
      }
      .title {
        position: absolute;
        left: 50%;
        top: 20px;
        font-size: 20px;
        transform: translateX(-50%);
      }
      .time_box {
        position: absolute;
        top: 10px;
        right: 0;
        img {
          height: 20px;
          width: 24px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
    .chart_box {
      box-sizing: border-box;
      width: 100%;
      height: calc(100vh - 50px);
      padding: 1%;
      display: flex;
      justify-content: space-between;
      .left_box {
        width: 28%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .left_top_box {
          height: 60%;
        }
        .left_bottom_box  {
          height: 35%;
        }
      }
      .middle_box {
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .middle_top_box{
          height: 65%;
        }
        .middle_bottom_box {
          height: 30%;
        }
      }
      .right_box {
        width: 28%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .right_top_box {
          height: 55%;
        }
        .right_bottom_box {
          height: 40%;
        }
      }
    }
  }
  </style>
  